
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible Menu Button</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	/*	The following two styles are necessary to override style rules in the 
		YUI CSS file. */

	#example ul {
		margin: 0;
	}

	#example a:hover {
		text-decoration: none;
	}


	/*	Hide the button and list while it is being transformed into a menu button.	*/

	.yui3-js-enabled .yui3-menubutton-loading #menu-1,
	.yui3-js-enabled .yui3-menubutton-loading #button-1 {
		display: none;
	}
	
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Accessible Menu Button</h1>

<div class="exampleIntro">
	<p>
This example illustrates how to use the Focus Manager Node Plugin, 
Event's <a href="../../api/YUI.html#event_delegate">delegation support</a> and 
<a href="../../api/YUI.html#event_mouseenter">mouseenter</a> event, along with 
the <a href="../../overlay/">Overlay widget</a> and Node's support for the 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> to
create an accessible menu button.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div class="yui3-menubutton-loading">

<a id="button-1" href="#menu-1"><span><span>Move To</span></span></a>
<div id="menu-1">
	<ul>
		<li><input type="button" name="button-1" value="Inbox"></li>
		<li><input type="button" name="button-2" value="Archive"></li>
		<li><input type="button" name="button-3" value="Trash"></li>
	</ul>        	
</div>

</div>

<script type="text/javascript">

	YUI({	
		base:"../../build/", 
		timeout: 10000,
		modules: {
			"menubuttoncss": {
				type: "css",
				fullpath: "assets/menubutton.css"
			},
			"menubuttonjs": {
				type: "js",
				fullpath: "assets/menubutton.js",
				requires: ["menubuttoncss", "node-focusmanager", "node-event-simulate", "overlay"]
			}			
		}

	}).use("menubuttonjs");

</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
